<template>
  <div class="allT" :class="dayModel===true?'lColor':'bColor'">
    <el-row class="indexImg">
      <Menu class="pHidden"></Menu>
      <PMenu class="pShow" style="display: none"></PMenu>
      <el-col style="background-color: rgba(0,0,0,.3)">
        <div class="center">
          <div class="title" v-text="obj.output"></div>
          <div class="info">
            <span style="margin-right: 20px"><i class="el-icon-date"></i> {{blogInfo.updateDate}}</span>
            <span><i class="el-icon-view"></i> {{blogInfo.views}}次</span>
          </div>
          <div class="info">
            <span style="margin-right: 20px"><i class="el-icon-s-grid"></i> {{blogInfo.name}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :sm="{span:18,offset:2}" style="position: relative;top: -5rem">
        <div class="allT content" ref="myTop"  :class="dayModel===true?'lBColor':'dBColor'">
          <v-md-preview :text="blogInfo.content" ref="preview" @copy-code-success="handleCopyCodeSuccess" />
          <div class="center margin-t allT">
            <el-button type="danger" plain @click="aLiInfo" v-if="blogInfo.appreciate">赞赏</el-button>
          </div>
        </div>
      </el-col>
      <el-col :sm="{span:4}" class="allT pHidden" :class="dayModel===true?'lColor':'bColor'">
        <div :class="isFixed===true?'fixedStyle':''" >
          <div class="font1 catalogStyle">
           <i style="font-size: 30px" class="iconfont icon-list"></i>
            目录
          </div>
          <div style="overflow: scroll;height: 400px">
          <div
              v-for="anchor in titles"
              class="catalogStyle oneLine"
              @click="handleAnchorClick(anchor)"
              :style="{padding:`0 0 10px ${anchor.indent * 10}px`}"
          >
            <a style="cursor: pointer;" class="catalogStyle anchor ">{{ anchor.title }}</a>
          </div>
          </div>
        </div>
      </el-col>
      <el-col :sm="{span:16,offset:4}">
        <Comment v-if="blogInfo.comment"></Comment>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios"
import Menu from '../views/Menu'
import PMenu from '../views/PMenu'
import Comment from '../views/Comment'
import EasyTyper from "easy-typer-js";
export default {
  name: 'Page',
  components: {
    Menu,
    PMenu,
    Comment
  },
  data() {
    return {
      isFixed: false,
      blogInfo: {},
      obj: {
        output: '',
        isEnd: false,
        speed: 90,
        singleBack: false,
        sleep: 0,
        type: 'normal',
        backSpeed: 40,
        sentencePause: false
      },
      titles: [],
    }
  },
  watch: {
    $route: function (value) {
      if ( value.name === 'page'){
        this.getPageInfo(value.query.id);
        console.log(this.blogInfo)
      }else{
        window.removeEventListener("scroll",this.handleScrollx,true);
      }
    },
    blogInfo: function (){
      this.$nextTick( () => {
        this.Anchor();
      })
    }
  },
  computed: {
    dayModel() {
      return this.$store.state.dayModel;
    }
  },
  beforeMount() {
    this.$store.commit("setBId", this.$route.query.id);
    this.$store.commit("setRouterName", this.$router.currentRoute._rawValue.name)
    this.toTop();
  },
  mounted() {
    let id = this.$route.query.id;
    this.getPageInfo(id);
    window.addEventListener("scroll",this.handleScrollx,true);
  },
  methods: {
    handleScrollx(){
      if ( this.$refs.myTop.getBoundingClientRect().top <= 0){
          this.isFixed = true;
      }else
        this.isFixed = false;
    },
    Anchor(){
        const anchors = this.$refs.preview.$el.querySelectorAll('h1,h2,h3,h4,h5,h6');
        const titles = Array.from(anchors).filter((title) => !!title.innerText.trim());
        if (!titles.length) {
          this.titles = [];
          return;
        }
        const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();

        this.titles = titles.map((el) => ({
          title: el.innerText,
          lineIndex: el.getAttribute('data-v-md-line'),
          indent: hTags.indexOf(el.tagName),
        }));
    },
    handleAnchorClick(anchor) {
      const {preview} = this.$refs;
      const {lineIndex} = anchor;

      const heading = preview.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);

      if (heading) {
        preview.scrollToTarget({
          target: heading,
          scrollContainer: window,
          top: 60,
        });
      }
    },
    handleCopyCodeSuccess() {
      this.$message.success("复制成功");
    },
    aLiInfo() {
      this.$notify({
        title: '请我喝瓶可乐吧',
        message: '<img src="https://heavenpl.gitee.io/pic/images/aliPay.jpg" width="200"></div>',
        position: 'bottom-right',
        duration: 0,
        dangerouslyUseHTMLString: true
      })
    },
    getPageInfo(id) {
      axios.get("/searchOneBlogInfo", {params: {id}}).then((res) => {
        this.blogInfo = res.data;
        const typed = new EasyTyper(this.obj, res.data.title);
      })
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    }
  }
}
</script>
<style scoped>
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.oneLine {
  width: 200px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap
}
.fixedStyle {
  position: fixed;
  top: 90px
}
.v-md-editor-preview >>> .vuepress-markdown-body {
  transition: all .5s linear !important;
}
.font1 {
  font-weight: 700;
  font-size: 30px;
  text-align: center;
}
.indexImg {
  width: 100%;
  height: 400px;
  background: url("https://rmt.dogedoge.com/fetch/fluid/storage/bg/dojm2h.png?w=1920&q=100&fmt=webp") center center / cover no-repeat;
}
.anchor:hover {
  color: #3fb8ff;
}
pre{
  background-color: black !important;
}
.center {
  position: relative;
  top: 35%;
  text-align: center;
}
.catalogStyle {
  padding: 0 20px;
}
.title {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 20px;
}
.info {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.content {
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 12px 15px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
}
.dBColor >>> div {
  background-color: black;
  transition: all .5s linear !important;
  color: white;
}
.dBColor {
  background-color: black;
}
.lBColor {
  background-color: white;
}
.center {
  text-align: center;
}
.margin-t {
  margin-top: 20px;
}
</style>